<template>
    <div class="renyuan-bg">
        <GisplusTitle></GisplusTitle>
        <div class="renyuan-box-left flex-column-center">
            <div class="renyuan-box1 renyuan-box">
                <div class="renyuan-box-title">
                    <span>项目简介</span>
                </div>
                <p class="project-detail">
                    本项目起点位于儋州市那大镇，接在建万洋高速公路儋州互通，沿省道S315走廊布线，经西培农场、阜龙乡，终点位于白沙县城西侧牙叉农场三队，接G361什邦线，路线全长36.024km，其中儋州段长18.129km，白沙段长17.895km
                </p>
            </div>
            <div class="renyuan-box2 renyuan-box">
                <div class="renyuan-box-title">
                    <span>参建单位</span>
                </div>
                <div class="gis-table">
                    <table>
                        <thead>
                        <tr style="line-height: 0.4rem">
                            <th style="width: 40%;">参建方</th>
                            <th style="width: 60%;">单位名称</th>
                        </tr>
                        </thead>
                        <tbody style="font-size: 0.14rem">
                        <tr v-for="(p,index) in tables" :key="index" style="line-height: 0.4rem">
                            <td>{{p.name}}</td>
                            <td>
                                <p v-for="(n,i) in p.from" :key="i">
                                    {{n}}
                                </p>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="renyuan-box-mid flex-column-center">
            <div class="renyuan-box3 renyuan-box">
                <div class="renyuan-box-title">
                    <span>地理位置</span>
                </div>
                <el-carousel>
                    <el-carousel-item v-for="(item,index) in imageList" :key="index">
                        <img :src="item.imgSrc" alt=""
                             style="height: 3rem;margin: 0 auto;display: block;">
                    </el-carousel-item>
                </el-carousel>

            </div>
            <div class="renyuan-box4 renyuan-box">
                <div class="renyuan-box-title">工程规模</div>
                <p class="project-detail">
                    本项目采用“代建+监理一体化”管理模式及设计施工总承包建设模式，工期32个月。批复概算总投资32.327亿元，建安费为23.381亿元，设计施工总承包合同额21.760亿元。
                </p>
                <p class="project-detail">
                    全线共设4个互通立交，1个服务区，1处分离式立交，大桥15座，中桥2座，互通立交匝道桥13座，涵洞及通道106座，隧道4座，道路设计标准为高速公路，双向四车道，路基标准宽度为26m。总造价21.761亿元，建设工期960日历天（2018年4月1日至2020年11月16日），缺陷责任期720日
                </p>
            </div>
        </div>
        <div class="renyuan-box-right flex-column-center">
            <div class="renyuan-box5 renyuan-box">
                <div class="renyuan-box-title">主要工程数量</div>
                <div class="gis-table">
                    <table>
                        <thead>
                        <tr style="line-height: 0.4rem">
                            <th style="width: 10%;">序号</th>
                            <th style="width: 30%;">项目</th>
                            <th style="width: 20%;">单位</th>
                            <th style="width: 40%;">数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,index) in proTables" :key="index" style="line-height: 0.4rem">
                            <td>{{index+1}}</td>
                            <td>{{p.proname}}</td>
                            <td>{{p.unit}}</td>
                            <td>{{p.num}}</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'
  import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'

  export default {
    name: 'anbao',
    data () {
      return {
        tables: [
          {name: '项目业主', from: ['海南省交通工程建设局']},
          {
            name: '“代建+监理”', from: ['中交公路规划设计院有限公司',
              '山东恒建工程监理咨询有限公司']
          },
          {
            name: '设计施工总承包(EPC)', from: ['中国公路工程咨询集团有限公司', '中交一公局厦门工程有限公司']
          }
        ],
        proTables: [
          {proname: '路基挖方', unit: '万m³', num: 484.69},
          {proname: '路基填方', unit: '万m³', num: 352.54},
          {proname: '软基换填', unit: '万m³', num: 34.9},
          {proname: '防护排水工程', unit: '万m³', num: 14.5},
          {proname: '桥梁桩基', unit: '根', num: 1315},
          {proname: '桥梁承台', unit: '个', num: 141},
          {proname: '桥梁系梁', unit: '道', num: 323},
          {proname: '桥梁圆柱墩', unit: '根', num: 770},
          {proname: '空心薄壁墩', unit: '根', num: 45},
          {proname: '桥梁盖梁', unit: '道', num: 442},
          {proname: '预制箱梁', unit: '片', num: 1840},
          {proname: '涵洞、通道', unit: '道', num: 106},
          {proname: '白石山隧道', unit: 'm', num: 3882},
          {proname: '新安隧道', unit: 'm', num: 1388},
          {proname: '牙炳隧道', unit: 'm', num: 1141},
          {proname: '牙叉隧道', unit: 'm', num: 582},
        ],
        imageList: []
      }
    },
    components: {
      echarts, GisplusTitle
    },
    mounted () {
      this.getImage()
    },
    methods: {
      getImage () {
        const that = this
        return that.request.getImage().then(function (response) {
            that.imageList = response.content
          })
          .catch(function (error) {
            that.fetchError = error
          })
      }
    }
  }
</script>

<style scoped lang="scss">
    .renyuan-box {
        background-image: url('../../assets/img/renyuan-box.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .renyuan-box1 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box2 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
    }

    .renyuan-box3 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box4 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
    }

    .renyuan-box5 {
        width: 100%;
        flex: 1;
        padding-right: 0.1rem;
    }

    .renyuan-box-title {
        font-size: 0.18rem;
        padding: 0.1rem 0.2rem;
        font-weight: bold;
        color: #5AC8FA;
        display: flex;
        justify-content: space-between;
    }

    .box-title-jump {
        cursor: pointer;
        color: #F8BC38;
    }

    .img-box-s {
        height: 3rem;
        display: flex;
        padding-right: 0.5rem;
        justify-content: space-between;

        .img-box-s-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .img-box-s-mid {
            flex: 3;
        }

        .img-box-s-right {
            flex: 1;
            font-size: 0.16rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0.3rem 0;
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.3);
        }
    }

    .renyuan-img {
        position: relative;

        img {
            display: block;
            margin: 0 auto;
            width: 1rem;
            height: 1rem;
        }

        .renyuan-num {
            width: 0.34rem;
            font-size: 0.34rem;
            color: #fff;
            position: absolute;
            top: 10%;
            left: 0;
            right: 0;
            margin: 0 auto;
            font-family: Agency FB;
        }

        .renyuan-text {
            width: 0.96rem;
            font-size: 0.16rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
        }
    }

    .project-detail {
        padding: 0.1rem;
        font-size: 0.24rem;
        text-indent: 0.48rem;
        color: #F8BC38;
    }
</style>
